<template>
	<view class="gradeActive" :style="colorStyle">
		<!-- #ifdef MP -->
		<NavBar titleText="激活会员" iconColor="#FFFFFF" textColor="#FFFFFF" showBack></NavBar>
		<!-- #endif -->

		<view class="headerBg"></view>
		<view class="header">
			<view class="title">激活会员卡</view>
			<view>新用户免费激活会员卡</view>
		</view>
		<view class="conter">
			<view class="headerT">
				<view class="name text-center">激活有礼</view>
			</view>
			<view class="acea-row row-between-wrapper pl-20 pr-20" v-if="comerGift.level_money_status && comerGift.level_integral_status && comerGift.level_coupon_status">
				<view class="w-224 h-206 bg--w111-fff rd-16rpx text-center relative pt-1">
					<view class="w-130 h-54 bg-w111-FEE4B6-30 abs-rt filter-15"></view>
					<view class="w-64 h-64 m-auto mt-22">
						<image src="../static/member1.png" class="w-full h-full"></image>
					</view>
					<view class="mt-12 text--w111-333 fs-26">赠送积分</view>
					<view class="fs-22 text--w111-999 mt-6">激活领<text class="text-w111-FF7D00 fs-20">{{comerGift.level_give_integral}}</text>积分</view>
				</view>
				<view class="w-224 h-206 bg--w111-fff rd-16rpx text-center relative pt-1">
					<view class="w-130 h-54 bg-w111-FEE4B6-30 abs-rt filter-15"></view>
					<view class="w-64 h-64 m-auto mt-22">
						<image src="../static/member2.png" class="w-full h-full"></image>
					</view>
					<view class="mt-12 text--w111-333 fs-26">赠送余额</view>
					<view class="fs-22 text--w111-999 mt-6">激活赠<text class="text-w111-FF7D00 fs-20">{{comerGift.level_give_money}}</text>余额</view>
				</view>
				<view class="w-224 h-206 bg--w111-fff rd-16rpx text-center relative pt-1">
					<view class="w-130 h-54 bg-w111-FEE4B6-30 abs-rt filter-15"></view>
					<view class="w-64 h-64 m-auto mt-22">
						<image src="../static/member3.png" class="w-full h-full"></image>
					</view>
					<view class="mt-12 text--w111-333 fs-26">超值券包</view>
					<view class="fs-22 text--w111-999 mt-6">赠价值<text class="text-w111-FF7D00 fs-20">{{comerGift.level_give_coupon_price}}</text>元优惠券</view>
				</view>
			</view>
			<view class="acea-row row-between-wrapper pl-20 pr-20" v-if="giftStatus">
				<view v-if="comerGift.level_integral_status" class="pl-28 w-346 h-140 bg--w111-fff acea-row row-middle rd-16rpx relative">
					<view class="w-130 h-54 bg-w111-FEE4B6-30 abs-rt filter-15"></view>
					<view class="w-64 h-64">
						<image src="../static/member1.png" class="w-full h-full"></image>
					</view>
					<view class="ml-20 w-216">
						<view class="mt-12 text--w111-333 fs-26">赠送积分</view>
						<view class="fs-24 text--w111-999 mt-6">激活领<text class="text-w111-FF7D00">{{comerGift.level_give_integral}}</text>积分</view>
					</view>
				</view>
				<view v-if="comerGift.level_money_status" class="pl-28 w-346 h-140 bg--w111-fff acea-row row-middle rd-16rpx relative">
					<view class="w-130 h-54 bg-w111-FEE4B6-30 abs-rt filter-15"></view>
					<view class="w-64 h-64">
						<image src="../static/member2.png" class="w-full h-full"></image>
					</view>
					<view class="ml-20 w-216">
						<view class="mt-12 text--w111-333 fs-26">赠送余额</view>
						<view class="fs-24 text--w111-999 mt-6">激活赠<text class="text-w111-FF7D00">{{comerGift.level_give_money}}</text>余额</view>
					</view>
				</view>
				<view v-if="comerGift.level_coupon_status" class="pl-28 w-346 h-140 bg--w111-fff acea-row row-middle rd-16rpx relative">
					<view class="w-130 h-54 bg-w111-FEE4B6-30 abs-rt filter-15"></view>
					<view class="w-64 h-64">
						<image src="../static/member3.png" class="w-full h-full"></image>
					</view>
					<view class="ml-20 w-216">
						<view class="mt-12 text--w111-333 fs-26">超值券包</view>
						<view class="fs-22 text--w111-999 mt-6">赠价值<text class="text-w111-FF7D00 fs-20">{{comerGift.level_give_coupon_price}}</text>元优惠券</view>
					</view>
				</view>
			</view>
			<view class="pl-20 pr-20" v-if="giftStatusOne">
				<view v-if="comerGift.level_integral_status" class="bg--w111-fff h-120 w-full acea-row row-middle rd-16rpx pl-32 pr-32 relative">
					<view class="w-130 h-54 bg-w111-FEE4B6-30 abs-rt filter-15"></view>
					<view class="w-64 h-64">
						<image src="../static/member1.png" class="w-full h-full"></image>
					</view>
					<view class="acea-row row-middle">
						<view class="ml-20 fs-28 text--w111-333">赠送积分</view>
						<view class="ml-12 fs-26 text--w111-999">激活会员卡领<text class="text-w111-FF7D00">{{comerGift.level_give_integral}}</text>积分</view>
					</view>
				</view>
				<view v-if="comerGift.level_money_status" class="bg--w111-fff h-120 w-full acea-row row-middle rd-16rpx pl-32 pr-32 relative">
					<view class="w-130 h-54 bg-w111-FEE4B6-30 abs-rt filter-15"></view>
					<view class="w-64 h-64">
						<image src="../static/member2.png" class="w-full h-full"></image>
					</view>
					<view class="acea-row row-middle">
						<view class="ml-20 fs-28 text--w111-333">赠送余额</view>
						<view class="ml-12 fs-26 text--w111-999">激活会员卡领<text class="text-w111-FF7D00">{{comerGift.level_give_money}}</text>余额</view>
					</view>
				</view>
				<view v-if="comerGift.level_coupon_status" class="bg--w111-fff h-120 w-full acea-row row-middle rd-16rpx pl-32 pr-32 relative">
					<view class="w-130 h-54 bg-w111-FEE4B6-30 abs-rt filter-15"></view>
					<view class="w-64 h-64">
						<image src="../static/member3.png" class="w-full h-full"></image>
					</view>
					<view class="acea-row row-middle">
						<view class="ml-20 fs-28 text--w111-333">超值券包</view>
						<view class="ml-12 fs-26 text--w111-999">赠价值<text class="text-w111-FF7D00">{{comerGift.level_give_coupon_price}}</text>元优惠券</view>
					</view>
				</view>
			</view>
			<view class="form mt-20 ml-20 mr-20 rd-16rpx">
				<view class="item acea-row row-middle" v-for="(item,index) in list" :key="index">
					<view class="name acea-row row-middle" :class="{ asterisk: item.required==1 }">
						<view>{{item.info}}</view>
					</view>
					<!-- text -->
					<view class="input" v-if="item.format == 'text'">
						<input type="text" :placeholder="item.tip" placeholder-class="placeholder"
							v-model="item.value" />
					</view>
					<!-- number -->
					<view class="input" v-if="item.format=='num'">
						<input type="number" :placeholder="item.tip" placeholder-class="placeholder"
							v-model="item.value" />
					</view>
					<!-- email -->
					<view class="input" v-if="item.format=='mail'">
						<input type="text" :placeholder="item.tip" placeholder-class="placeholder"
							v-model="item.value" />
					</view>
					<!-- date -->
					<view class="input" v-if="item.format=='date'">
						<picker mode="date" :value="item.value" :end='endDate' @change="bindDateChange($event,index)">
							<view class="acea-row row-middle row-right">
								<view v-if="item.value == ''">{{item.tip}}</view>
								<view v-else>{{item.value}}</view>
								<text class='iconfont icon-ic_rightarrow'></text>
							</view>
						</picker>
					</view>
					<!-- id -->
					<view class="input" v-if="item.format=='id'">
						<input type="idcard" :placeholder="item.tip" placeholder-class="placeholder"
							v-model="item.value" />
					</view>
					<!-- phone -->
					<view class="input" v-if="item.format=='phone'">
						<input type="tel" :placeholder="item.tip" placeholder-class="placeholder"
							v-model="item.value" />
					</view>
					<!-- radio -->
					<view class="input" v-if="item.format=='radio'">
						<radio-group @change="radioChange($event,index)">
							<label class="label">
								<radio value="0" :checked="item.value == 0" />{{item.singlearr[0]}}
							</label>
							<label>
								<radio value="1" :checked="item.value == 1" />{{item.singlearr[1]}}
							</label>
						</radio-group>
					</view>
					<!-- address -->
					<view class="input" v-if="item.format=='address'" @click="changeRegion(index)">
						<view class='acea-row row-middle row-right'>
							<view class="picker flex-1" v-if="item.value">{{item.value}}</view>
							<view class="picker flex-1 color-add" v-else>请选择地址</view>
							<text class='iconfont icon-ic_rightarrow'></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bnt" @click="activate">确认激活</view>
		<areaWindow ref="areaWindow" :display="display" :cityShow="2" :address="addressInfo" @submit="OnChangeAddress"
			@changeClose="changeClose"></areaWindow>
	</view>
</template>
<script>
	import {
		levelInfo,
		levelActivate
	} from '@/api/user.js';
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import NavBar from '@/components/NavBar.vue'
	import areaWindow from '@/components/areaWindow/index.vue'
	import dayjs from '@/plugin/dayjs/dayjs.min.js';
	import colors from '@/mixins/color.js';
	export default {
		components: {
			NavBar,
			areaWindow
		},
		mixins: [colors],
		data() {
			return {
				imgHost: HTTP_REQUEST_URL,
				list: [],
				comerGift: {},
				endDate: '',
				display: false,
				addressInfo: [],
				currentIndex: 0
			};
		},
		computed:{
			giftStatus(){
				let status = (this.comerGift.level_money_status&&this.comerGift.level_integral_status&&!this.comerGift.level_coupon_status)||(this.comerGift.level_money_status&&this.comerGift.level_coupon_status&&!this.comerGift.level_integral_status)||(this.comerGift.level_integral_status&&this.comerGift.level_coupon_status&&!this.comerGift.level_money_status)
				return status
			},
			giftStatusOne(){
				let status = (this.comerGift.level_money_status&&!this.comerGift.level_integral_status&&!this.comerGift.level_coupon_status)||(!this.comerGift.level_money_status&&this.comerGift.level_coupon_status&&!this.comerGift.level_integral_status)||(this.comerGift.level_integral_status&&!this.comerGift.level_coupon_status&&!this.comerGift.level_money_status)
				return status
			}
		},
		onLoad() {
			this.getInfo();
		},
		onReady() {},
		onShow() {
			this.endDate = dayjs(new Date(Number(new Date().getTime()))).format('YYYY-MM-DD');
		},
		methods: {
			activate() {
				let that = this;
				for (var i = 0; i < that.list.length; i++) {
					let data = that.list[i]
					if (data.required || data.value) {
						if (data.format === 'date' || data.format === 'address') {
							if (!data.value) {
								return that.$util.Tips({
									title: `${data.tip}`
								});
							}
						}
						if (data.format === 'text') {
							if (!data.value.trim()) {
								return that.$util.Tips({
									title: `${data.tip}`
								});
							}
						}
						if (data.format === 'num') {
							if (data.value <= 0) {
								return that.$util.Tips({
									title: `${data.tip}`
								});
							}
						}
						if (data.format === 'mail') {
							if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(data.value)) {
								return that.$util.Tips({
									title: `${data.tip}`
								});
							}
						}
						if (data.format === 'phone') {
							if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(data.value)) {
								return that.$util.Tips({
									title: `${data.tip}`
								});
							}
						}
						if (data.format === 'id') {
							if (!
								/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/i
								.test(data.value)) {
								return that.$util.Tips({
									title: `${data.tip}`
								});
							}
						}
					}
				}
				levelActivate(this.list).then(res => {
					uni.reLaunch({
						url: '/pages/users/user_vip/index'
					})
				}).catch(err => {
					return this.$util.Tips({
						title: err
					});
				})
			},
			radioChange(e, index) {
				this.list[index].value = e.detail.value
			},
			bindDateChange: function(e, index) {
				this.list[index].value = e.detail.value
			},
			getInfo() {
				levelInfo().then(res => {
					res.data.activate_info.forEach(item => {
						if (item.format == 'radio') {
							item.value = '0'
						} else if (item.format == 'address') {
							item.addressInfo = []
						} else {
							item.value = ''
						}
					})
					this.list = res.data.activate_info;
					this.comerGift = res.data.activate_gift;
				}).catch(err => {
					this.$util.Tips({
						title: err
					})
				})
			},
			OnChangeAddress(address) {
				this.list[this.currentIndex].addressInfo = address;
				this.list[this.currentIndex].value = address.map(v => v.label).join('');
			},
			changeClose: function() {
				this.currentIndex = 0;
				this.addressInfo = [];
				this.display = false;
			},
			changeRegion(index) {
				this.currentIndex = index;
				this.addressInfo = this.list[index].addressInfo;
				this.display = true;
			},
		}
	}
</script>
<style lang="scss">
	/deep/uni-radio .uni-radio-wrapper{
		vertical-align: unset;
	}
	
	.color-add {
		color: #cdcdcd;
	}

	.gradeActive {
		padding-bottom: 20rpx;
		overflow: hidden;

		.headerBg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 370rpx;
			background: linear-gradient(180deg, #1E1C19 0%, #19140E 100%);
		}

		.header {
			position: relative;
			background-image: url(),
				url();
			background-position: 392rpx 34rpx, left top;
			background-repeat: no-repeat;
			background-size: 240rpx 155rpx, 100% 100%;
			width: 686rpx;
			height: 328rpx;
			padding: 60rpx 0 0 64rpx;
			margin: 44rpx auto 0;
			font-size: 24rpx;
			line-height: 34rpx;
			color: rgba(126, 75, 6, 0.8);

			.title {
				margin-bottom: 8rpx;
				font-weight: 700;
				font-size: 44rpx;
				line-height: 62rpx;
				color: #7E4B06;
			}
		}

		.bnt {
			position: fixed;
			right: 32rpx;
			bottom: 32rpx;
			bottom: calc(32rpx + constant(safe-area-inset-bottom));
			bottom: calc(32rpx + env(safe-area-inset-bottom));
			left: 32rpx;
			height: 88rpx;
			border-radius: 44rpx;
			background: #FACC7D;
			text-align: center;
			font-weight: 500;
			font-size: 28rpx;
			line-height: 88rpx;
			color: #7E4B06;
		}

		.conter {
			position: relative;
			margin: -104rpx 0 0;

			.list {
				margin-top: 78rpx;
				padding-bottom: 28rpx;
				position: relative;

				.vipBg {
					width: 262rpx;
					height: 174rpx;
					display: block;
					position: absolute;
					right: -48rpx;
					bottom: -64rpx;
				}

				.itemNo {
					font-weight: 400;
					color: #282828;
					font-size: 26rpx;
					position: relative;
					z-index: 1;

					.pictrue {
						width: 90rpx;
						height: 90rpx;
						margin-bottom: 12rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
				}
			}

			.form {
				background: #FFFFFF;
			}

			.item {
				padding: 32rpx 40rpx;
				font-size: 28rpx;
				line-height: 40rpx;
				color: #333333;

				/deep/uni-radio {
					vertical-align: middle;
					margin-right: 2rpx;
				}

				/deep/uni-radio .uni-radio-input {
					width: 28rpx;
					height: 28rpx;
					border: 1px solid #E6993A;
				}

				/deep/uni-radio .uni-radio-input.uni-radio-input-checked {
					border: 1px solid #E6993A !important;
					background-color: #E6993A !important;
				}

				/deep/.wx-radio-input {
					width: 29rpx;
					height: 29rpx;
					border: 1px solid #CCCCCC;
				}

				/deep/.wx-radio-input.wx-radio-input-checked {
					border: 1px solid #E6993A !important;
					background-color: #E6993A !important;
				}

				/deep/uni-radio .uni-radio-input.uni-radio-input-checked:before {
					font-size: 15rpx;
				}

				.label {
					margin-right: 48rpx;
				}

				.name {
					padding-left: 26rpx;
					background-repeat: no-repeat;
					background-position: left center;
					background-size: 14rpx;

					&.asterisk {
						background-image: url();
					}
				}

				.placeholder {
					font-size: 28rpx;
					font-weight: 400;
					color: #CCCCCC;
				}

				.input {
					flex: 1;
					text-align: right;

					.iconfont {
						margin-left: 8rpx;
						font-size: 24rpx;
						color: #999;
						line-height: 15px;
					}

					input {
						font-size: 28rpx;
					}
				}
			}

			.headerT {
				background-image: url();
				background-repeat: no-repeat;
				background-size: 100% 100%;
				height: 104rpx;
				padding: 32rpx 0 0 40rpx;
				font-weight: 600;
				font-size: 30rpx;
				line-height: 42rpx;
				color: #333333;
				// backdrop-filter: blur(5px);

				.pictrue {
					width: 124rpx;
					height: 22rpx;

					image {
						width: 100%;
						height: 100%;
						display: block;
					}

					&.on {
						transform: rotateX(180deg);
					}
				}
			}
		}
	}
</style>